.resizeable-box {
  position: relative;
  box-sizing: content-box;

  background-color: #f7f7f7;
  display: inline-block;
  &:hover {
    outline: #1890ff 1px dashed;
    border: none;
  }

  .handle-box {
    width: 0;
    height: 0;
    overflow: visible;
    display: none;
    > i {
      position: absolute;
      display: block;
      width: 8px;
      height: 8px;
      box-sizing: border-box;
      border: rgba(140, 140, 140, 0.6) 1px solid;
      background-color: #fff;
      box-shadow: rgb(140, 140, 140, 30%);
    }
    .handle-tl {
      top: -5px;
      left: -5px;
      cursor: nwse-resize;
    }
    .handle-t {
      top: -5px;
      left: 50%;
      margin-left: -5px;
      cursor: ns-resize;
    }
    .handle-tr {
      right: -5px;
      top: -5px;
      cursor: nesw-resize;
    }
    .handle-l {
      top: 50%;
      margin-top: -5px;
      left: -5px;
      cursor: ew-resize;
    }
    .handle-r {
      top: 50%;
      margin-top: -5px;
      right: -5px;
      cursor: ew-resize;
    }
    .handle-bl {
      bottom: -5px;
      left: -5px;
      cursor: ns-resize;
    }
    .handle-b {
      bottom: -5px;
      left: 50%;
      margin-left: -5px;
      cursor: ns-resize;
    }
    .handle-br {
      bottom: -5px;
      right: -5px;
      cursor: nwse-resize;
    }
  }

  &.selected {
    border: #1890ff 1px solid;
    transform: translate(-1px, -1px);
    &:hover {
      outline: none;
    }
    >.handle-box {
      display: block;
    }
  }
}